<template>
  <div class="home" style="padding-top: 43px">
    <NavBar />
    <HomeBanner :list="swiperList" />
    <div class="bg-white flex justify-center">
      <div
        class="container-width flex flex-row items-center justify-evenly"
        style="height: 154px"
      >
        <div class="flex flex-col items-center">
          <div
            style="
              font-size: 35px;
              font-weight: 500;
              color: #000000;
              line-height: 49px;
              letter-spacing: 2px;
            "
          >
            {{ dictList[0] ? dictList[0].dictValue : 0 }}
            <span style="font-size: 16px">条</span>
          </div>
          <div
            style="
              font-size: 14px;
              font-weight: 400;
              color: #000000;
              line-height: 20px;
            "
          >
            本月新增商机
          </div>
        </div>
        <div class="w-px h-16 bg-[#E5E5E5]" style="margin: auto 20px"></div>
        <div class="flex flex-col items-center">
          <div
            style="
              font-size: 35px;
              font-weight: 500;
              color: #000000;
              line-height: 49px;
              letter-spacing: 2px;
            "
          >
            {{ dictList[1] ? dictList[1].dictValue : 0 }}
            <span style="font-size: 16px">条</span>
          </div>
          <div
            style="
              font-size: 14px;
              font-weight: 400;
              color: #000000;
              line-height: 20px;
            "
          >
            累计对接项目
          </div>
        </div>
        <div class="w-px h-16 bg-[#E5E5E5]" style="margin: auto 20px"></div>
        <div class="flex flex-col items-center">
          <div
            style="
              font-size: 35px;
              font-weight: 500;
              color: #000000;
              line-height: 49px;
              letter-spacing: 2px;
            "
          >
            {{ dictList[2] ? dictList[2].dictValue : 0 }}
            <span style="font-size: 16px">家</span>
          </div>
          <div
            style="
              font-size: 14px;
              font-weight: 400;
              color: #000000;
              line-height: 20px;
            "
          >
            企业库
          </div>
        </div>
        <div class="w-px h-16 bg-[#E5E5E5]" style="margin: auto 20px"></div>
        <div class="flex flex-col items-center">
          <div
            style="
              font-size: 35px;
              font-weight: 500;
              color: #000000;
              line-height: 49px;
              letter-spacing: 2px;
            "
          >
            {{ dictList[3] ? dictList[3].dictValue : 0 }}
            <span style="font-size: 16px">家</span>
          </div>
          <div
            style="
              font-size: 14px;
              font-weight: 400;
              color: #000000;
              line-height: 20px;
            "
          >
            园区库
          </div>
        </div>
        <div class="w-px h-16 bg-[#E5E5E5]" style="margin: auto 20px"></div>
        <div class="flex flex-col items-center">
          <div
            style="
              font-size: 35px;
              font-weight: 500;
              color: #000000;
              line-height: 49px;
              letter-spacing: 2px;
            "
          >
            {{ dictList[4] ? dictList[4].dictValue : 0 }}
            <span style="font-size: 16px">条</span>
          </div>
          <div
            style="
              font-size: 14px;
              font-weight: 400;
              color: #000000;
              line-height: 20px;
            "
          >
            政策库
          </div>
        </div>
      </div>
    </div>

    <!-- 精品园区1 开始 -->
    <div class="mt-8 mb-8 flex justify-center">
      <div class="container-width">
        <div class="">
          <!-- 标题栏 开始 -->
          <div
            class="flex flex-row justify-between border-l-4 border-[#FE7743] mb-6"
          >
            <div
              class="flex flex-row items-center ml-2 text-base font-semibold"
              style="
                font-size: 18px;
                font-weight: 600;
                color: #000000;
                letter-spacing: 1px;
              "
            >
              精品园区
              <div
                class="flex flex-row justify-center items-center text-white ml-2"
                style="
                  cursor: pointer;
                  padding: 0px 4px;
                  font-size: 10px;
                  background: #fe7743;
                "
                @click="goToCreatePark"
              >
                园区免费发布
                <img
                  src="../assets/arrow_right.png"
                  style="margin-left: 4px; width: 6px; height: 6px"
                />
              </div>
            </div>
            <div
              style="
                font-size: 12px;
                font-weight: 600;
                color: #1984c4;
                cursor: pointer;
              "
              @click="goToParkListPage"
            >
              更多精品园区>>
            </div>
          </div>
          <!-- 标题栏 结束 -->

          <!-- 内容开始 -->
          <div
            class="flex justify-start flex-wrap justify-between"
            style="position: relative; height: 555px"
          >
            <!-- 左点击开始 -->
            <div
              @click="yuanquPrePage"
              style="
                width: 30px;
                height: 555px;
                position: absolute;
                left: -39px;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 100;
              "
            >
              <div
                style="
                  padding-right: 5px;
                  cursor: pointer;
                  width: 28px;
                  height: 28px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-radius: 100%;
                  background-size: cover;
                  background-color: rgba(0, 0, 0, 0.4);
                  color: #ffffff;
                "
              >
                《
              </div>
            </div>
            <!-- 左点击结束 -->

            <!-- 内容开始1 -->

            <div
              v-for="(item, index) in yuanquList"
              :key="index"
              style="width: 214px; height: 180px"
              class="flex flex-col mb-3.5"
              @click="goToParkDetailPage(item.id)"
            >
              <div class="flex relative">
                <img
                  :src="item.logourl"
                  style="width: 214px; height: 131px; cursor: pointer"
                />
                <div class="leftIcon">
					<!-- {{ item.guojiajibie }} -->
					<div class="leftIconText">{{item.guojiajibie}}</div>
				</div>
                <div
                  v-if="item.ifvr == 'Y'"
                  class="leftVR"
                  style="cursor: pointer"
                >
                  <div class="leftVRText">VR</div>
                </div>
                <div
                  style="padding: 0px 7px"
                  class="absolute bottom-0 left-0 flex h-7 bg-black/30 text-[12px] text-white w-full flex flex-row justify-between items-center"
                >
                  <div class="flex flex-1 items-center">
                    <div
                      class="flex justify-center items-center"
                      style="
                        width: 15px;
                        height: 15px;
                        background: #fe7743;
                        font-size: 12px;
                        font-weight: 400;
                        color: #ffffff;
                      "
                    >
                      {{ item.yuanqujiaobiao }}
                    </div>
                    <div
                      style="
                        width: 100px;
                        margin-left: 4px;
                        font-size: 12px;
                        font-weight: 500;
                        color: #ffffff;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                      "
                    >
                      {{ item.yuanquname }}
                    </div>
                  </div>
                  <div
                    style="
                      width: 80px;
                      font-size: 12px;
                      font-weight: 500;
                      color: #ffffff;
                    "
                  >
                    {{ item.provincename }} {{ item.cityname }}
                  </div>
                </div>
              </div>
              <div
                class="flex flex-row text-[12px] bg-white"
                style="padding: 6px 7px;white-space: nowrap;text-overflow: ellipsis;width: 215px;overflow: hidden;}"
              >
                <div
                  v-for="(c, cindex) in item.yuanqubiaoqianArr"
                  :key="cindex"
                  class="mr-1 px-1 py-0.5 border border-[#FE7743] text-[#FE7743]"
                >
                  {{ c }}
                </div>
              </div>
            </div>

            <!-- 内容结束1 -->

            <!-- <div v-if="yuanquList.length % yuanquListQuery.pageSize != 0"
							v-for="index in yuanquList.length % yuanquListQuery.pageSize" :key="'box' + index"
							style="width: 214px;height: 180px;">
						</div> -->

            <!-- 右点击 开始	 -->
            <div
              @click="yuanquNextPage"
              style="
                width: 30px;
                height: 555px;
                position: absolute;
                right: -39px;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 100;
              "
            >
              <div
                style="
                  padding-left: 8px;
                  cursor: pointer;
                  width: 28px;
                  height: 28px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-radius: 100%;
                  background-size: cover;
                  background-color: rgba(0, 0, 0, 0.4);
                  color: #ffffff;
                "
              >
                》
              </div>
            </div>

            <div
              @click="handleClick"
              ref="button"
              style="
                width: 30px;
                height: 555px;
                position: absolute;
                right: -99px;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 100;
              "
            ></div>

            <!-- 右点击 结束 -->
          </div>
        </div>
      </div>
    </div>
    <!-- 精品园区1 结束 -->

    <!-- 广告 开始 -->
    <div class="mb-8 flex justify-center">
      <div class="container-width">
        <img
          :src="ad1.pictureurl"
          @click="windowOpen(ad1.linkurl)"
          style="cursor: pointer"
        />
      </div>
    </div>
    <!-- 广告结束 -->

    <!-- 入驻项目精选 开始 -->
    <div class="mt-8 mb-8 flex justify-center">
      <div class="container-width">
        <div class="">
          <!-- 标题栏 开始 -->
          <div
            class="flex flex-row justify-between border-l-4 border-[#FE7743] mb-6"
          >
            <div
              class="flex flex-row items-center ml-2 text-base font-semibold"
              style="
                font-size: 18px;
                font-weight: 600;
                color: #000000;
                letter-spacing: 1px;
              "
            >
              入驻项目精选
              <div
                class="flex flex-row justify-center items-center text-white ml-2"
                style="
                  cursor: pointer;
                  padding: 0px 4px;
                  font-size: 10px;
                  font-weight: 600;
                  background: #fe7743;
                "
                @click="goToCreateProject"
              >
                项目免费发布
                <img
                  src="../assets/arrow_right.png"
                  style="margin-left: 4px; width: 6px; height: 6px"
                />
              </div>
            </div>
            <div
              style="
                font-size: 12px;
                font-weight: 600;
                color: #1984c4;
                cursor: pointer;
              "
              @click="goToProjectListPage"
            >
              更多优质项目>>
            </div>
          </div>
          <!-- 标题栏 结束 -->

          <!-- 内容开始 -->
          <div
            class="flex justify-start flex-wrap justify-between"
            style="position: relative; margin-bottom: -20px"
          >
            <!-- 左点击开始 -->
            <div
              @click="projectPrePage"
              style="
                width: 30px;
                height: 456px;
                position: absolute;
                left: -39px;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 100;
              "
            >
              <div
                style="
                  padding-right: 5px;
                  cursor: pointer;
                  width: 28px;
                  height: 28px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-radius: 100%;
                  background-size: cover;
                  background-color: rgba(0, 0, 0, 0.4);
                  color: #ffffff;
                "
              >
                《
              </div>
            </div>
            <!-- 左点击结束 -->

            <!-- 内容开始1 -->

            <div
              v-for="(item, index) in projectList"
              :key="index"
              class="flex flex-col border border-[#EDEDED] mb-3.5"
              style="
                background-color: #ffffff;
                width: 286px;
                padding: 13px 15px;
                height: 138px;
              "
              @click="goToProjectDetailPage(item.id)"
            >
              <div
                class="text-sm"
                style="
                  font-size: 13px;
                  font-weight: 400;
                  color: #000000;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                "
              >
                {{ item.projectname }}
              </div>
              <div class="flex flex-row text-[12px] pt-2.5">
                <div
                  v-for="(bqitem, bqindex) in item.biaoqianArr"
                  :key="bqindex"
                  style="cursor: pointer"
                  class="mr-1 px-1 py-0.5 border border-[#FE7743] text-[#FE7743]"
                >
                  {{ bqitem }}
                </div>
              </div>
              <div class="flex flex-row">
                <div class="flex-1 pt-2.5 text-sm text-[#EE1A23]">
                  <div
                    style="font-size: 13px; font-weight: 500; color: #ee1a23"
                  >
                    {{ item.touziyuji }}
                    <span
                      style="font-size: 11px; font-weight: 400; color: #ee1a23"
                      >万元</span
                    >
                  </div>
                  <div
                    style="font-size: 11px; font-weight: 400; color: #746f6b"
                  >
                    投资总额
                  </div>
                </div>
                <div class="flex-1 pt-2.5 text-sm text-[#EE1A23]">
                  <div
                    style="font-size: 13px; font-weight: 500; color: #ee1a23"
                  >
                    {{ item.shuishouyuji }}
                    <span
                      style="font-size: 11px; font-weight: 400; color: #ee1a23"
                      >万元</span
                    >
                  </div>
                  <div
                    style="font-size: 11px; font-weight: 400; color: #746f6b"
                  >
                    预计缴税
                  </div>
                </div>
                <div class="flex-1 pt-2.5 text-sm text-[#EE1A23]">
                  <div
                    style="font-size: 13px; font-weight: 500; color: #ee1a23"
                  >
                    {{ item.cityname }}
                    <span
                      style="font-size: 11px; font-weight: 400; color: #ee1a23"
                    ></span>
                  </div>
                  <div
                    style="font-size: 11px; font-weight: 400; color: #746f6b"
                  >
                    意向地区
                  </div>
                </div>
              </div>
            </div>

            <!-- 内容结束1 -->

            <!-- 右点击 开始	 -->
            <div
              @click="projectNextPage"
              style="
                width: 30px;
                height: 456px;
                position: absolute;
                right: -39px;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 100;
              "
            >
              <div
                style="
                  padding-left: 8px;
                  cursor: pointer;
                  width: 28px;
                  height: 28px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-radius: 100%;
                  background-size: cover;
                  background-color: rgba(0, 0, 0, 0.4);
                  color: #ffffff;
                "
              >
                》
              </div>
            </div>

            <div
              @click="ProjectClick"
              ref="button"
              style="
                width: 30px;
                height: 555px;
                position: absolute;
                right: -99px;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 100;
              "
            ></div>

            <!-- 右点击 结束 -->
          </div>
        </div>
      </div>
    </div>
    <!-- 入驻项目精选 结束 -->

    <div class="mb-8 flex justify-center">
      <div class="container-width">
        <img
          :src="ad2.pictureurl"
          @click="windowOpen(ad2.linkurl)"
          style="cursor: pointer"
        />
      </div>
    </div>

    <div class="mb-8 flex justify-center">
      <div class="container-width">
        <div class="">
          <div
            class="flex flex-row justify-between border-l-4 border-[#FE7743] mb-6"
          >
            <div
              class="flex flex-row items-center ml-2 text-base font-semibold"
              style="
                font-size: 18px;
                font-weight: 600;
                color: #000000;
                letter-spacing: 1px;
              "
            >
              精准项目对接
              <div
                class="flex flex-row justify-center items-center text-white ml-2"
                style="
                  cursor: pointer;
                  padding: 0px 4px;
                  font-size: 10px;
                  font-weight: 600;
                  background: #fe7743;
                "
                @click="goToCreateDocking"
              >
                我要对接
                <img
                  src="../assets/arrow_right.png"
                  style="margin-left: 4px; width: 6px; height: 6px"
                />
              </div>
            </div>
            <div
              style="
                font-size: 12px;
                font-weight: 600;
                color: #1984c4;
                cursor: pointer;
              "
              @click="goToProjectDockingListPage"
            >
              更多对接活动>>
            </div>
          </div>
          <div
            class="w-full flex justify-between"
            style="position: relative; height: 190px"
          >
            <div
              @click="dockingPrePage"
              style="
                width: 30px;
                height: 190px;
                position: absolute;
                left: -40px;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <div
                style="
                  cursor: pointer;
                  width: 28px;
                  height: 28px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-radius: 100%;
                  background-size: cover;
                  background-color: rgba(0, 0, 0, 0.4);
                  color: #ffffff;
                "
              >
                <
              </div>
            </div>
            <div
              v-for="(item, index) in dockingList"
              :key="index"
              style="width: 287px; height: 190px"
              class="flex flex-col mb-3.5"
              @click="goToProjectDockingDetailPage(item.id)"
            >
              <div style="width: 287px; height: 153px">
                <img
                  :src="item.pictureurl"
                  style="width: 287px; height: 153px; cursor: pointer"
                />
              </div>
              <div
                style="
                  cursor: pointer;
                  background-color: #ffffff;
                  padding: 5px 8px;
                  font-size: 18px;
                  font-weight: 600;
                  color: #000000;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                "
              >
                {{ item.name }}
              </div>

              <!--
                <div style="margin-top:7px;font-size: 12px;font-weight: 400;color: #000000;">时间：{{ item.createTime }}</div>
                <div style="margin-top:7px;font-size: 12px;font-weight: 400;color: #000000;">直播状态：{{ item.zhibozhuangtai }}</div>
                <div style="margin-top:7px;font-size: 12px;font-weight: 400;color: #000000;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">会议简介：{{ item.jianjie }}</div>
                -->
            </div>
            <div
              v-if="dockingList.length % dockingListQuery.pageSize != 0"
              v-for="index in dockingList.length % dockingListQuery.pageSize"
              :key="'box' + index"
              style="width: 287px; height: 190px"
            ></div>
            <div
              @click="dockingNextPage"
              style="
                width: 30px;
                height: 190px;
                position: absolute;
                right: -40px;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <div
                style="
                  cursor: pointer;
                  width: 28px;
                  height: 28px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-radius: 100%;
                  background-size: cover;
                  background-color: rgba(0, 0, 0, 0.4);
                  color: #ffffff;
                "
              >
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mb-8 flex justify-center">
      <div class="container-width">
        <img
          :src="ad3.pictureurl"
          @click="windowOpen(ad3.linkurl)"
          style="cursor: pointer"
        />
      </div>
    </div>
    <div class="mb-8 flex justify-center" style="margin-bottom: -0.8rem">
      <div class="container-width">
        <div class="">
          <div class="flex flex-wrap justify-between">
            <div
              v-for="(item, index) in newsList"
              :key="index"
              class="flex flex-col"
              style="width: 422px; margin-bottom: 31px"
            >
              <div
                class="w-full flex flex-row justify-between border-l-4 border-[#FE7743] mb-6"
              >
                <div class="flex flex-row ml-2 text-base font-semibold">
                  {{ item.name }}
                </div>
                <div
                  style="
                    font-size: 12px;
                    font-weight: 600;
                    color: #1984c4;
                    cursor: pointer;
                  "
                  @click="goToNewsListPage()"
                >
                  更多>>
                </div>
              </div>
              <div class="flex flex-col">
                <div
                  v-for="(item2, nindex) in item.news"
                  :key="nindex"
                  class="flex"
                  style="margin-bottom: 10px"
                  @click="goToNewsDetailPage(item2.id)"
                >
                  <div
                    v-if="nindex == 0"
                    style="width: 50%; height: 137px"
                    class="mr-2.5"
                  >
                    <img
                      :src="item2.pictureurl"
                      style="width: 100%; height: 137px; cursor: pointer"
                    />
                  </div>
                  <div
                    v-if="nindex == 0"
                    class="flex flex-col"
                    style="width: 50%; height: 137px"
                  >
                    <div
                      class="news-title"
                      style="
                        height: 28px;
                        font-size: 16px;
                        font-weight: 700;
                        letter-spacing: 1px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        cursor: pointer;
                      "
                    >
                      {{ item2.newsname }}
                    </div>
                    <div
                      style="
                        font-size: 12px;
                        font-weight: 400;
                        color: #000000;
                        letter-spacing: 1px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 4;
                        cursor: pointer;
                      "
                      class=""
                    >
                      {{ setContent(item2.content) }}
                    </div>
                  </div>
                  <div
                    v-else
                    class="news-title"
                    style="
                      font-size: 16px;
                      font-weight: 400;
                      letter-spacing: 1px;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      overflow: hidden;
                      cursor: pointer;
                    "
                  >
                    {{ item2.newsname }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="duijie" style="position: relative" id="createParkForm">
      <div
        class="duijieitem"
        :style="activeHeight"
        :class="whether ? 'isFixed' : ''"
        style="z-index: 800"
      >
        <div class="duijiexiangmu mb-3 flex" :style="activeHeight">
          <div class="duijiexiangmuText flex-1">我要对接</div>
          <div class="flex-1 flex justify-end" style="padding-right: 15px">
            <img
              v-if="duijieActive"
              style="width: 20px; height: 20px"
              src="../assets/shuoxiao.png"
              @click="changeDuijieActive(0)"
            />
            <img
              v-else
              style="width: 20px; height: 20px"
              src="../assets/fangda.png"
              @click="changeDuijieActive(1)"
            />
          </div>
        </div>
        <div v-if="duijieActive" style="padding: 0 15px">
          <el-form ref="dataForm" :model="yuanquForm" label-width="0px">
            <el-form-item label="" style="margin-bottom: 16px">
              <el-radio v-model="yuanquForm.type" label="1">园区</el-radio>
              <el-radio v-model="yuanquForm.type" label="2">企业项目</el-radio>
              <el-radio v-model="yuanquForm.type" label="3">其他</el-radio>
            </el-form-item>
            <el-form-item label="" style="margin-bottom: 16px">
              <el-input
                v-model="yuanquForm.yuanquname"
                prefix-icon="el-icon-school"
                placeholder="园区名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="" style="margin-bottom: 16px">
              <el-input
                v-model="yuanquForm.name"
                prefix-icon="el-icon-user"
                placeholder="姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="" style="margin-bottom: 16px">
              <el-input
                v-model="yuanquForm.mobile"
                prefix-icon="el-icon-mobile-phone"
                placeholder="电话（必填）"
              ></el-input>
            </el-form-item>
          </el-form>
          <a href="#" class="fasong" @click="addContact">发送</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import HomeBanner from "@/components/HomeBanner.vue";
import { fetchProjectList } from "@/api/project";
import { fetchParkList } from "@/api/park";
import { fetchDictList } from "@/api/dict";
import { fetchSwiperList } from "@/api/swiper";
import { fetchHomeNewsList } from "@/api/news";
import { fetchHomeDockingList } from "@/api/docking";
import { fetchAd } from "@/api/ad";

export default {
  name: "HomeView",
  components: {
    HomeBanner,
    NavBar,
  },
  data() {
    return {
      banner_list: ["https://pc.qingwuit.com/dist/images/default_banner.jpg"],
      projectListQuery: {
        pageNum: 1,
        pageSize: 9,
        ifshouyetuijian: "Y",
      },
      projectList: [],
      projectListTotal: 0,
      yuanquListQuery: {
        pageNum: 1,
        pageSize: 12,
        ifshouyetuijian: "Y",
      },
      yuanquList: [],
      yuanquListTotal: 0,
      dictListQuery: {
        dictType: "sys_shouyeshuliang",
      },
      dictList: [],
      swiperList: [],
      newsList: [],
      newsListQuery: {
        zixunleixing: 1,
        pageNum: 1,
        pageSize: 4,
      },
      dockingList: [],
      dockingListTotal: 0,
      dockingListQuery: {
        pageNum: 1,
        pageSize: 3,
      },
      ad1: {},
      ad2: {},
      ad3: {},
      loading: false,
      whether: false,
      yuanquForm: {
        type: "1",
        yuanquname: "",
        name: "",
        mobile: "",
      },
      duijieActive: false,
      activeHeight: "height:45px;border-radius: 10px;",
      myid: this.$router.params,
    };
  },
  created() {
    this.getProjectList();
    this.getYuanquList();
    this.getDictList();
    this.getSwiperList();
    this.getNewsList();
    this.getDockingList();
    this.getAd();
  },
  mounted() {
    // 园区自动点击事件开始
    setInterval(() => {
      this.handleClick();
    }, 10000);
    // 园区自动点击事件结束

    // 项目自动点击事件开始
    setInterval(() => {
      this.ProjectClick();
    }, 10000);
    // 项目自动点击事件结束

    window.addEventListener("scroll", this.handleScroll);

    this.$nextTick(() => {
      let states = this.$route.query.state;
      console.log(states);
      if (states == 0) {
        this.changeDuijieActive(1);
      } else {
        this.changeDuijieActive(0);
      }
    });
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    // 园区自动点击事件开始
    handleClick() {
      this.$refs.button.click();
      this.yuanquListQuery.pageNum += 1;
      let maxPage = Math.ceil(
        this.yuanquListTotal / this.yuanquListQuery.pageSize
      );
      if (this.yuanquListQuery.pageNum > maxPage) {
        this.yuanquListQuery.pageNum = 1;
      }
      this.getYuanquList();
    },
    // 园区自动点击事件结束

    // 项目自动点击事件开始
    ProjectClick() {
      this.$refs.button.click();
      this.projectListQuery.pageNum += 1;
      let maxPage = Math.ceil(
        this.projectListTotal / this.projectListQuery.pageSize
      );
      if (this.projectListQuery.pageNum > maxPage) {
        this.projectListQuery.pageNum = 1;
      }
      this.getProjectList();
    },
    // 园区自动点击事件结束

    getProjectList() {
      this.loading = true;
      fetchProjectList(this.projectListQuery).then((response) => {
        this.projectList = response.data;
        this.projectListTotal = response.total;
        this.loading = false;
      });
    },
    getYuanquList() {
      this.loading = true;
      fetchParkList(this.yuanquListQuery).then((response) => {
        this.yuanquList = response.data;
        this.yuanquListTotal = response.total;
        this.loading = false;
      });
    },
    getDictList() {
      this.loading = true;
      fetchDictList(this.dictListQuery).then((response) => {
        this.dictList = response.data;
        this.loading = false;
      });
    },
    getSwiperList() {
      this.loading = true;
      fetchSwiperList().then((response) => {
        this.swiperList = response.data;
        this.loading = false;
      });
    },
    getNewsList() {
      this.loading = true;
      fetchHomeNewsList(this.newsListQuery).then((response) => {
        this.newsList = response.data.slice(0, 4);
        this.loading = false;
      });
    },
    getDockingList() {
      this.loading = true;
      fetchHomeDockingList(this.dockingListQuery).then((response) => {
        this.dockingList = response.data;
        this.dockingListTotal = response.total;
        this.loading = false;
      });
    },
    getAd() {
      console.info(1);
      fetchAd("home_1").then((response) => {
        this.ad1 = response.data;
      });
      fetchAd("home_2").then((response) => {
        this.ad2 = response.data;
      });
      fetchAd("home_3").then((response) => {
        this.ad3 = response.data;
      });
    },
    setContent(value) {
      value = value
        .replace(/<\/?.+?\/?>/g, "")
        .replace(/<[^>]+>/g, "")
        .replace(/&nbsp;/gi, "")
        .replace(/\s/g, "");
      if (!value) return "";
      if (value.length > 300) {
        return value.slice(0, 300) + "...";
      }
      return value;
    },
    goToParkListPage() {
      this.$router.push({
        name: "yuanqu-list",
      });
    },
    goToParkDetailPage(id) {
      this.$router.push({
        name: "yuanqu-detail",
        params: {
          id: id,
        },
      });
    },
    go2ToParkDetailPage(id) {
      this.$router.push({
        name: "yuanqu-detail",
        params: {
          id: id,
        },
      });
    },
    goToProjectListPage() {
      this.$router.push({
        name: "project-list",
      });
    },
    goToProjectDetailPage(id) {
      this.$router.push({
        name: "project-detail",
        params: {
          id: id,
        },
      });
    },
    goToProjectDockingListPage() {
      this.$router.push({
        name: "project-docking",
      });
    },
    goToProjectDockingDetailPage(id) {
      this.$router.push({
        name: "project-docking-detail",
        params: {
          id: id,
        },
      });
    },
    goToNewsListPage() {
      this.$router.push({
        name: "news-list",
      });
    },
    goToNewsDetailPage(id) {
      this.$router.push({
        name: "news-detail",
        params: {
          id: id,
        },
      });
    },
    goToCreateProject() {
      this.$router.push({
        name: "ProjectsView",
      });
    },
    goToCreatePark() {
      this.$router.push({
        name: "ParksView",
      });
    },
    goToCreateDocking() {
      this.$router.push({
        name: "MineNewsView",
      });
    },
    windowOpen(url) {
      window.open(url);
    },
    projectPrePage() {
      this.projectListQuery.pageNum -= 1;
      if (this.projectListQuery.pageNum < 1) {
        this.projectListQuery.pageNum = 1;
      }
      this.getProjectList();
    },
    projectNextPage() {
      this.projectListQuery.pageNum += 1;
      let maxPage = Math.ceil(
        this.projectListTotal / this.projectListQuery.pageSize
      );
      if (this.projectListQuery.pageNum > maxPage) {
        this.projectListQuery.pageNum = maxPage;
      }
      this.getProjectList();
    },
    yuanquPrePage() {
      this.yuanquListQuery.pageNum -= 1;
      if (this.yuanquListQuery.pageNum < 1) {
        this.yuanquListQuery.pageNum = 1;
      }
      this.getYuanquList();
    },
    yuanquNextPage() {
      this.yuanquListQuery.pageNum += 1;
      let maxPage = Math.ceil(
        this.yuanquListTotal / this.yuanquListQuery.pageSize
      );
      if (this.yuanquListQuery.pageNum > maxPage) {
        this.yuanquListQuery.pageNum = maxPage;
      }
      this.getYuanquList();
    },
    dockingPrePage() {
      this.dockingListQuery.pageNum -= 1;
      if (this.dockingListQuery.pageNum < 1) {
        this.dockingListQuery.pageNum = 1;
      }
      this.getDockingList();
    },
    dockingNextPage() {
      this.dockingListQuery.pageNum += 1;
      let maxPage = Math.ceil(
        this.dockingListTotal / this.dockingListTotal.pageSize
      );
      if (this.dockingListTotal.pageNum > maxPage) {
        this.dockingListTotal.pageNum = maxPage;
      }
      this.getDockingList();
    },
    addContact() {
      createContact(this.yuanquForm).then((response) => {
        if (response.result === 1) {
          this.yuanquForm = {
            type: "1",
            yuanquname: "",
            name: "",
            mobile: "",
          };
          this.$notify({
            title: "成功",
            message: response.msg,
            type: "success",
            duration: 2000,
          });
        } else {
          this.$notify({
            title: "错误",
            message: response.msg,
            type: "error",
            duration: 2000,
          });
        }
      });
    },
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      var offsetTop = document.querySelector("#createParkForm").offsetTop;
      this.whether = scrollTop > offsetTop;
    },
    changeDuijieActive(state) {
      if (state == 0) {
        this.duijieActive = false;
        this.activeHeight = "height:45px;border-radius: 10px;";
      } else {
        this.duijieActive = true;
        this.activeHeight = "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.leftIcon {
  position: absolute;
  top: 0;
  left: 13px;
  width: 19px;
  height: 43px;
  background: url("../assets/flag.png") no-repeat;
  background-size: cover;
  display: flex;
//   flex-direction: column;
  text-align: center;
  justify-content: center;
  line-height: 16px;
  font-size: 6px;
  color: #ffffff;
//   padding-top: 2px;
}
.leftIcon .leftIconText{
  width: 0.7rem;
  color: white;
  font-size: 0.5rem;
}

.leftVR {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 100%;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.4);
}

.leftVR .leftVRText {
  padding-top: 10px;
  color: white;
  font-size: 25px;
}

/* duijie开始 */
.duijie .duijieitem {
  position: fixed;
  right: 5px;
  bottom: 5px;
  width: 286px;
  height: 343px;
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.19);
  border-radius: 10px;
}

.duijie .duijiexiangmu {
  height: 45px;
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.0625rem;
  background: #fe7743;
  display: flex;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  align-items: center;
}

.duijie .duijiexiangmu .duijiexiangmuText {
  margin-left: 1rem;
  font-size: 14px;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #ffffff;
  line-height: 20px;
}

.duijie .xingming {
  width: 14rem;
  height: 2.75rem;
  line-height: 2.75rem;
  background: #f9faf9;
  border-radius: 4px;
  margin-top: 1.1875rem;
  margin-left: 2.0625rem;
  padding-left: 0.625rem;
}

.duijie .fasong {
  width: 100%;
  height: 44px;
  line-height: 2.75rem;
  background: #fe7743;
  border-radius: 4px;
  margin-top: 1.1875rem;
  text-align: center;
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #ffffff;
  display: block;
}

.news-title {
  color: #000000;
}

.news-title:hover {
  color: #fe7743;
}

// 滚动开始1
@keyframes rowup {
  0% {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(920px, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(0px, 0px, 0);
    transform: translate3d(20px, 0px, 0);
  }
}

.list1 {
  position: relative;
  height: 200px;
  overflow-y: auto;
  font-size: 15px;
  font-family: "Microsoft Yahei";
  display: contents;
}

.rowup {
  -webkit-animation: 20s rowup linear infinite normal;
  animation: 20s rowup linear infinite normal;
  position: relative;
}

// 滚动结束1

// 滚动开始2
@keyframes rowup2 {
  0% {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(0px, 0px, 0);
    transform: translate3d(-900px, 0px, 0);
  }
}

.list2 {
  position: relative;
  height: 200px;
  overflow-y: auto;
  font-size: 15px;
  font-family: "Microsoft Yahei";
  display: contents;
}

.rowup2 {
  -webkit-animation: 20s rowup2 linear infinite normal;
  animation: 20s rowup2 linear infinite normal;
  position: relative;
}

// 滚动结束2
</style>
